<template>
  <div class="column-ba">
    <ul>
      <li v-for="item in newList" :key="item.id">
        <img :src="item.img" :alt="item.text">
        <p>{{ item.text }}</p>
        <h5>￥{{ item.price }}</h5>
        <button v-if="item.bool" @click="item.bool=!item.bool">修改价格</button>
        <div v-else>
          <input type="text" v-model.number="item.trendsPrice">
          <button @click="confirmSelf(item)">确认</button>
          <button @click="item.bool=!item.bool">取消</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'ShoeColumnBaBa-page',
  props: {
    newList:{
      type:Object,
      default() {
        return {}
      }

    }
  },
  data: function () {
    return {
      bool: true,
    }
  },
  methods: {
    confirmSelf(item) {
      if (item.trendsPrice === '') {
        item.bool = !item.bool
      } else {
        item.bool = !item.bool
        item.price = item.trendsPrice
        item.trendsPrice = ''
        return item.price
      }
    },
  }
}
</script>

<style scoped>
.column-ba {
  ul {
    position: relative;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 700px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;

    li {
      width: 200px;
      height: 300px;
      margin: 30px;
      border-radius: 10px;
      padding: 20px;
      border: 1px solid #ddd;

      img {
        width: 200px;
        height: 200px;
      }
    }

  }
}


</style>

